<script setup lang="ts">
import { updateUserInfo } from '@/api/user'
import { useUserStore } from '@/store/user'
import { computed, ref } from 'vue'

// 性别选项
const genderOptions = [
  { text: '男', value: '男' },
  { text: '女', value: '女' },
  { text: '保密', value: '保密' },
]

const userStore = useUserStore()

// 用户信息
const userInfo = ref({
  nickname: userStore.userInfo?.nickname || '',
  gender: userStore.userInfo?.gender || '未设置',

})

// 表单是否有效
const isValid = computed(() => {
  return userInfo.value.nickname.trim().length > 0
})

// 选择头像
// function chooseAvatar() {
//   uni.chooseImage({
//     count: 1,
//     sizeType: ['compressed'],
//     sourceType: ['album', 'camera'],
//     success: (res) => {
//       const tempFilePath = res.tempFilePaths[0]
//       // 这里应该先上传图片到服务器，获取URL后再更新
//       userInfo.value.avatar = tempFilePath
//     },
//   })
// }

// 性别选择
function onGenderChange(e: any) {
  userInfo.value.gender = genderOptions[e.detail.value].value
}

// 保存资料
function saveProfile() {
  if (!isValid.value) {
    return
  }

  uni.showLoading({
    title: '保存中...',
  })
  updateUserInfo(userInfo.value).then(() => {
    uni.hideLoading()
    uni.showToast({
      title: '保存成功',
      icon: 'success',
    })
    // 返回上一页
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  })
}
</script>

<template>
  <view class="container">
    <view class="form">
      <!-- 昵称 -->
      <view class="form-item">
        <view class="label">
          昵称
        </view>
        <input
          v-model="userInfo.nickname"
          class="input"
          type="text"
          placeholder="请输入昵称"
          maxlength="20"
        >
      </view>

      <!-- 性别 -->
      <view class="form-item">
        <view class="label">
          性别
        </view>
        <picker
          class="picker"
          :range="genderOptions"
          range-key="text"
          :value="genderOptions.findIndex(item => item.value === userInfo.gender)"
          @change="onGenderChange"
        >
          <view class="picker-value">
            {{ userInfo.gender }}
            <text class="iconfont icon-arrow-right" />
          </view>
        </picker>
      </view>

      <!-- 个性签名 -->
    </view>

    <!-- 保存按钮 -->
    <view class="submit-btn" :class="{ disabled: !isValid }" @click="saveProfile">
      保存
    </view>
  </view>
</template>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.form {
  background: #fff;
  border-radius: 12rpx;
  padding: 0 30rpx;

  .form-item {
    display: flex;
    align-items: center;
    min-height: 100rpx;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .label {
      width: 160rpx;
      font-size: 28rpx;
      color: #333;
    }

    .avatar-wrap {
      position: relative;
      width: 120rpx;
      height: 120rpx;

      .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      .iconfont {
        position: absolute;
        right: -10rpx;
        bottom: -10rpx;
        width: 40rpx;
        height: 40rpx;
        background: #4caf50;
        border-radius: 50%;
        color: #fff;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .input {
      flex: 1;
      height: 100rpx;
      font-size: 28rpx;
      color: #333;
    }

    .picker {
      flex: 1;

      .picker-value {
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        color: #333;

        .iconfont {
          font-size: 32rpx;
          color: #999;
        }
      }
    }

    .textarea {
      flex: 1;
      height: 160rpx;
      font-size: 28rpx;
      color: #333;
      padding: 20rpx 0;
    }

    .word-count {
      position: absolute;
      right: 30rpx;
      bottom: 20rpx;
      font-size: 24rpx;
      color: #999;
    }
  }
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #4caf50;
  border-radius: 44rpx;
  font-size: 32rpx;
  color: #fff;
  margin-top: 60rpx;

  &.disabled {
    background: #ccc;
  }
}
</style>
